<template>
	<view class="">
		<view class="parenClass m-t-25 p-t-20 p-b-20">
			<view class="homeTit m-0-a f f-a-c f-j-b">
				<view class="topName m-0-a">
					{{name}}
				</view>
				<view @click="SeeMore" class="rig f f-a-c f-j-b">
					查看更多<image src="/static/home/11.png" class="rightJian m-l-10" mode=""></image>
				</view>
			</view>
			<!-- 下面的内容 -->
			<view class="goodBook m-t-20 m-0-a f f-a-c f-j-b f-w-w">
				<view v-for="(item,index) in list" @click="detils(item)" :key="index" class="itemBox m-b-30">
					<!-- <image :src="item.cover" class="itemImg" mode="aspectFit"></image> -->
					<div class="itemImg f f-a-c f-j-c">
						<!-- <image :src="item.cover" class="Img" mode="aspectFill"></image> -->
						<image :src="item.cover" class="Img" mode="heightFix"></image>
					</div>
					<view class="tit f f-a-c m-t-20 m-b-10">
						<view class="oneNights m-r-10">
							{{item.name}}
						</view>
						<view class="children">
							{{item.category.name}}
						</view>
					</view>
					<view class="age">
						{{item.author}}著 {{item.press}}
					</view>
					<view class="age m-t-10">
						适读年龄：{{item.age_limit.name}}
					</view>
					<view class="botColor f f-a-c f-w-w m-t-10">
						<view v-for="(ite,ind) in item.tags" :key="ind" class="lef m-r-10">
							{{ite.name}}
						</view>
						<!-- <view class="lef">
							启蒙教育
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: ['', '', '', '']
			},
			num: {
				type: Number,
				default: 1
			},
			name: {
				type: String,
				default: '好书上新'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// 点击跳转的书籍
			SeeMore() {
				if (this.num == 1) {
					uni.navigateTo({
						url: `/pages/index/Books?is_newest=1&is_recommend=0`
					})
				} else {
					uni.navigateTo({
						url: `/pages/index/Books?is_newest=0&is_recommend=1`
					})
				}
			},
			// 跳转到详情
			detils(item) {
				// console.log(item, '999999999999999999999999999999999999');
				// if (this.num == 1) {
				uni.navigateTo({
					url: '/pages/index/DetailsPage?id=' + item.id
				})
				// }
			},
		},
		mounted() {
			console.log(this.num, '123456')
		}
	}
</script>

<style lang="scss" scoped>
	.goodBook {
		width: 90%;
	}

	.itemBox {
		width: 49%;
		height: 210px;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 20rpx;

		&:nth-child(2n) {
			margin-left: 1.5%;
		}
	}

	.itemBox::-webkit-scrollbar {
		display: none;
	}

	.lef {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff9e8;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ecbf2f;
		margin-bottom: 10rpx;
	}

	.age {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.itemImg {
		width: 100%;
		height: 196rpx;

		border-radius: 20rpx;

		.Img {
			width: 100%;
			height: 100%;
		}
	}

	.children {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #edf8f6;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #009d85;
	}

	.oneNights {
		width: 70%;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
		white-space: nowrap;
		/* 禁止文本换行 */
		overflow: hidden;
		/* 隐藏超出容器的部分 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
	}

	.parenClass {
		width: 100%;
		// background-color: #fff;
		background-color: #f6f7fb;

		.homeTit {
			width: 90%;
			margin-bottom: 50rpx;

			.rig {
				width: 22%;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;

				// margin-bottom: 100px;
				.rightJian {
					width: 12rpx;
					height: 22rpx;
				}
			}
		}

		.topName {
			width: 90%;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}
	}
</style>